<script setup>
import { ref } from 'vue'
import { bucketsGetListService } from '@/api/buckets'

const loading = ref(false)
const bucketsList = ref([])

const getBuckets = async () => {
  loading.value = true
  const res = await bucketsGetListService()
  bucketsList.value = res.data.data
  loading.value = false
}
getBuckets()
</script>

<template>
  <el-container>
    <el-header style="display: flex; flex-direction: row-reverse; align-items: center">
      <el-button
        @click="$router.push('/buckets/create')"
        type="primary"
        size="large"
        color="#162d4e"
        >创建 Bucket</el-button
      >
    </el-header>
    <el-main
      v-loading="loading"
      style="
        caret-color: transparent;
        box-sizing: border-box; /* 包括 padding 和 border 在内计算宽度 */
      "
    >
    <!-- @click="$router.push('/buckets/objects?path=/' + item.name)" -->
      <div v-if="bucketsList.length > 0">
        <div
          class="list-item"
          @click="$router.push('/buckets/show?name=' + item.name)"
          v-for="item in bucketsList"
          :key="item.name"
        >
          <el-descriptions :title="item.name" column="2">
            <el-descriptions-item label="创建时间" span="2">
              {{ item.createdTime }}
            </el-descriptions-item>
            <el-descriptions-item span="2">
              <el-divider />
            </el-descriptions-item>
            <el-descriptions-item>
              <el-icon color="black" size="50px">
                <svg
                  t="1732953591828"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="10531"
                >
                  <path
                    d="M976.372585 33.986724C960.778676 12.795002 935.98836 0 909.598668 0H86.720105C60.330414 0.399844 35.540097 12.795002 19.946189 33.986724 3.552592 56.377977-3.244752 84.367044 1.553373 111.956267c20.392034 118.353768 63.175322 367.456462 97.162046 566.57868v0.399844C116.308547 780.095275 131.502612 868.460758 140.299176 919.640765c5.597813 43.183132 41.583756 75.57048 85.166732 77.169856h545.786802c43.582975-1.599375 79.568918-33.986724 85.166731-77.169856l41.183913-240.30613 0.399844-1.599375L953.581487 352.262398v-0.799688l41.183913-239.506443c4.798126-27.589223-1.599375-55.57829-18.392815-77.969543m-151.940649 674.136665h-651.745412l-12.795002-74.370949h676.935573l-12.395159 74.370949zM880.010226 381.450996H115.908703l-12.795002-74.370949h789.291683L880.010226 381.450996z"
                    p-id="10532"
                  ></path>
                </svg>
              </el-icon>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div v-else>
        <el-empty description="没有桶"></el-empty>
      </div>
    </el-main>
  </el-container>
</template>

<style lang="scss" scoped>
.list-item {
  box-sizing: border-box;
  margin-bottom: 30px;
  padding: 20px;
  width: 100%;
  height: 100%;
  border: 1px solid rgb(229, 229, 229);
  cursor: pointer;
  position: relative;

  &:hover::before {
    content: ''; /* 必须要有内容 */
    position: absolute; /* 绝对定位 */
    // top: calc(-1 * var(--el-main-padding));
    // left: calc(-1 * var(--el-main-padding));
    // width: calc(100% + var(--el-main-padding) * 2); /* 覆盖父元素宽度 */
    // height: calc(100% + var(--el-main-padding) * 2); /* 覆盖父元素高度 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.052); /* 设置蒙层的颜色和透明度 */
    z-index: 999; /* 确保蒙层在父元素和子元素之上 */
  }
}
</style>
